<template>
  <div style="padding: 0 15px">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
    >
      <path
        :fill="topNav?(!theme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff'):(!topTheme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff')"
        d="M15.7372 15.7372C15.5703 15.9054 15.3432 16 15.1062 16C14.8693 16 14.6422 15.9054 14.4753 15.7372L11.463 12.7159C10.2211 13.6907 8.68756 14.2196 7.10882 14.2176C3.18536 14.2176 0 11.0323 0 7.10882C0 3.18536 3.18536 0 7.10882 0C11.0323 0 14.2176 3.18536 14.2176 7.10882C14.2196 8.68756 13.6907 10.2211 12.7159 11.463L15.7372 14.4753C15.9054 14.6422 16 14.8693 16 15.1062C16 15.3432 15.9054 15.5703 15.7372 15.7372ZM12.4398 7.10702C12.4398 10.0496 10.0508 12.4386 7.10822 12.4386C4.16562 12.4386 1.7766 10.0496 1.7766 7.10702C1.7766 4.16442 4.16562 1.7754 7.10822 1.7754C10.0508 1.7754 12.4398 4.16442 12.4398 7.10702Z"
        fill-rule="evenodd"
        fill-opacity="0.8"
      ></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
// const toggleClick = () => {
//   emit('toggleClick');
// }
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
